<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5</title>
    <style>
        
    </style>
</head>
<body>
    <!-- html5的新标签(语义化) -->
    <header>头部标签</header>
    <nav>导航标签</nav>
    <article>内容标签</article>
    <section>块级标签</section>
    <aside>侧边栏标签</aside>
    <footer>尾部标签</footer>
    <!-- 
        注意点：
            这种语义化标准针对搜索引擎的
            这些新标签页面中可以使用多次的
            在IE9中，需要把这些元素转换为块级元素
            其实，我们移动端更喜欢使用这些标签
            HTML5的标签远远不止这些，还有更多其他的标签
    -->


    <!-- audio音频标签 -->
    <audio controls='controls' loop='loop'>
        <!-- 因为各浏览器的兼容格式不一样，解决办法就是放多个音频格式 -->
        <source src="./audio/1.MP3" type="audio/mpeg">
        <source src="./audio/1.Ogg" type="audio/ogg">
        <source src="./audio/1.Wav" type="audio/wav">
        <!-- 如果你的浏览器上面的格式都不支持则显示下面的话 -->
        无法播放建议更换浏览器
    </audio>
    <!-- 音频的常见属性 -->
    <!-- autoplay ：如果音频出现该属性，则音频在就绪后立马播放(谷歌浏览器不支持，可能会吓到用户) -->
    <!-- controls : 如果出现该属性，则向用户显示控件，比如播放按钮 -->
    <!-- loop : 如果出现该属性，则每当音乐结束时重新开始播放 -->
    <!-- src ：要播放的音乐URL -->

    <!-- 支持的音频格式：Ogg MP3 Wav -->
    <!-- 各浏览器支持的音频格式 -->
    <!-- IE9：MP3 -->
    <!-- Firefox3.5 ：Ogg Wav -->
    <!-- Opera10.5 ：Ogg Wav -->
    <!-- Chrome3.0 ： Ogg MP3 -->
    <!-- Safari3.0 ： MP3 Wav -->







    <!-- 视频标签 -->
    <video loop='loop' muted  poster="./images/startGame.png" autoplay loops controls>
        <source src="./video/1.mp4" type="video/mp4">
        <source src="./video/1.Ogg" type="video/ogg">
        <source src="./video/1.WebM" type="video/webm">
            您的浏览器不支持播放此视频建议更换浏览器播放
    </video>
    <!-- video视频标签常见的属性 -->
    <!-- autoplay : 视频准备就绪自动播放 -->
    <!-- controls : 向用户显示播放控件 -->
    <!-- loop ：播放完是否继续播放此视频，循环播放 -->
    <!-- preload : 是否等加载完在播放 -->
    <!-- poster : 加载等在的画面图片 -->
    <!-- muted : 静音播放 -->


    <!-- 支持的视屏格式：Ogg MPEG4 WebM -->
    <!-- 各浏览器支持的视频格式 -->
    <!-- IE : MEPG4 -->
    <!-- Firefox : Ogg WebM -->
    <!-- Opera : Ogg WebM -->
    <!-- Chrome : Ogg MPEG4 WebM -->
    <!-- Safari : MPEG4 -->




    <!-- 新增表单标签 -->
    <form action="" method="get">
        <li>邮箱：<input type="email" name="email" id=""></li>

        <li>网址：<input type="url" name="url" id=""></li>

        <li>日期：<input type="date" name="date" id=""></li>

        <li>时间：<input type="time" name="time" id=""></li>

        <li>几月：<input type="month" name="month" id=""></li>

        <li>几周：<input type="week" name="week" id=""></li>

        <li>数字：<input type="number" name="number" id=""></li>

        <li>上传文件：<input type="file" name="" id=""></li>

        <li>手机号：<input type="tel" name="tel" id=""></li>

        <li>搜索框：<input type="search" name="search" id=""></li>

        <li>颜色：<input type="color" name="color" id=""></li>

        <li>重置：<input type="reset" value="重置"></li>
        <input type="submit" value="提交">
    </form>

    <!-- 新增的表单属性 -->
    <!-- required='required' 如果在表单里面添加了该属性则内容不能为空 -->
    <!-- placeholder="这里面填写表单提示的内容"   表单提示文本/或者叫占位符-->
    <!-- autofocus='autofocus' 自动获得表单焦点 -->
    <!-- 
        autocomplete="on" 默认值的off(关闭的状态，这个属性很少用，涉及隐私问题)  该属性的作用就是提示输入过的历史记录
        该属性的两点要求：1.需要在表单上加上name属性 2.同时成功提交
    -->
    <!-- multiple='multiple' 可以一次性上传多个文件 只能在file表单里面使用 -->
    <!-- <button disabled='disabled'>按钮</button>  禁用按钮-->









    <!-- 账号密码更好的写法 -->
    <form>
        <!-- 让label的for和input的id关联起来 -->
        <!-- 当我点击账号这两个文字的时候，鼠标也同样会聚焦到input框上 -->
        <label for="demo">账号：</label>
        <input type="text" id="demo">

        <label for="pass">密码</label>
        <input type="text" id="pass">
    </form>
</body>
</html>

